<template>
	<view class="page">
		<view class="flex items-center address bg-white" v-if="!address.mobile" @click="handleChooseAddress">
			<wd-icon name="location" size="14px" class="mrp"></wd-icon>
			<view class="mlp" style="color: #666;">
				请选择收货地址
			</view>
		</view>
		<view class="address2">
			<view class=" flex items-center pxp bg-white" style="height: 100%;" @click="handleChooseAddress">
				<wd-icon name="location" size="14px" class="mrp"></wd-icon>
				<view class="flex-1 mlp">
					<view class="flex items-center">
						<view class="">
							{{address.name}}
						</view>
						<view class="mlp">
							{{address.mobile}}
						</view>
					</view>
					<view style="color: #666; font-size: 12px;">
						{{`${address.provinceName}-${address.cityName}-${address.regionName}`}}
					</view>
				</view>
			</view>
		</view>

		<view class="">
			<view v-for="(cell, index2) in list" :key="index2" class="flex items-center pp"
				style="border-bottom: 1px solid #eee;background-color: #fff;">
				<image :src="cell.goodsInfo.logo" style="border-radius: 4px; margin-right: 12px;height: 60px;width: 80px;" />
				<view class="flex-1 flex flex-col " style="gap: 2px;">
					<view style="font-size: 15px;color: #000;">
						{{cell.goodsInfo.name}}
					</view>
					<view class="flex " style="justify-content: space-between;">
						<view class="">
							× {{cell.num}}
						</view>
						<view style="color: red;font-size: 16px;margin-bottom: 10rpx;">
							¥{{cell.goodsInfo.price}}
						</view>
					</view>
				</view>
			</view>

			<view class="bg-white flex " style="justify-content: flex-end;color: #999;padding: 10rpx 8rpx;border-bottom: 1px solid #eee;font-size: 12px;">
				共 <span class="text-red">{{ total_number }} </span> 件，合计
				<view  class="mxp price">
					¥{{total}}
				</view>
			</view>

			<wd-textarea v-model="textarea" :maxlength="100" show-word-limit placeholder="买家留言(选填,100字以内)" />
		</view>

		<view class="bottom">
			<view class="mrp">
				<view class="flex items-center">
					支付金额: <view class="price">¥ {{total_price}}</view>
				</view>
				<view class="" style="color: #999;font-size: 12px;">
					配送费：¥5.00
				</view>
			</view>
			<wd-button style="margin: 0;" custom-class="m0" @click="show = true">提交订单</wd-button>
		</view>

		<wd-action-sheet v-model="show" :actions="actions" @select="handleSelect" cancel-text="取消" />
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	import userApi from "@/api/user.js"
	const show = ref(false)
	const actions = [{
			name: '微信支付'
		},
		{
			name: '会员支付'
		},
	]
	const list = ref([])
	const textarea = ref("")
	const address = reactive({
		cityId: null,
		cityName: null,
		detail: null,
		id: null,
		isDefault: null,
		mobile:null,
		name: null,
		provinceId: null,
		provinceName:null,
		regionId: null,
		regionName: null,
		status: null,
		userId: null,
	})

	const total = computed(() => {
		let number = 0
		if (list.value.length) {
			list.value.map(item => {
				number = number + (item.goodsInfo.price * item.num)
			})
		}
		return number
	})

	const total_price = computed(() => {
		return total.value + 5
	})

	const total_number = computed(() => {
		let number = 0
		if (list.value.length) {
			list.value.map(item => {
				number = number + (item.num)
			})
		}
		return number
	})


	onLoad((e) => {
		userApi.getCartList().then(cartRes =>{
			list.value = cartRes.list
		})
	})
	
	onShow(() =>{
		userApi.getAddressDefault({
			addressId : 0
		}).then(res =>{
			Object.assign(address , res.address)
		})
		
	})

	const handleSelect = (e) => {
		let data = {
			cartIds: "35",
			couponId: 0,
			orderMode: "express",
			payAmount: total_price.value,
			remark: textarea.value,
			selectNum: "",
			targetId: 0,
			type: "goods",
			usePoint: 0,
		}
		if (e.index === 0) {
			console.log("微信支付")
			data.payType = "JSAPI"
		} else if (e.index === 1) {
			console.log("会员支付")
			data.payType = "BALANCE"
		} else {

		}
	}
	
	const handleChooseAddress = () =>{
		uni.navigateTo({
			url : "/pages/user/address?choose=true"
		})
	}
</script>

<style lang="scss" scoped>
	.footer {
		height: 120rpx;
		background-color: #fff;
		border-top: 1px solid #eee;
	}

	.wraper {
		height: calc(100vh - var(--window-top) - 120rpx);
	}

	.address {
		height: 120rpx;
		justify-content: center;
		border-bottom: 1px solid #eee;
		padding: 20rpx;
		padding-bottom: 10rpx;
		background-size: 120rpx auto;
		background: #fff url("") bottom left repeat-x
	}
	
	.address2{
		height: 120rpx;
		justify-content: center;
		border-bottom: 1px solid #eee;
		padding-bottom: 10rpx;
		background-size: 120rpx auto;
		background: #fff url("") bottom left repeat-x
		
	}

	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 20rpx;
		padding-bottom: calc(20rpx + var(--status-bar-height));
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	button {
		margin: 0 !important;
	}
</style>